<template>
  <div>
    <!-- h2 div p span 这些原生的html元素，会被vue重新包装， 会自动给他们添加一个原生的事件 -->
    <h2 @click="fn">父组件---{{ aaa }}</h2>
    <!-- native vue将当前的组件 看做原生的元素，给你自动添加一个click原生事件 -->
    <child-com :child="aaa" @click.native="fn" />

    <child-com>
      AAAA
    </child-com>
  </div>
</template>

<script>
import ChildCom from './ChildCom.vue'
export default {
  components: {
    ChildCom
  },
  props: {
    aaa: {
      type: Number,
      required: true
      // default: 0
    },
    bbb: {
      type: Object,
      // 如果父向子传值，是复杂数据类型的时候，默认值不能给固定的地址； 和data一样，用一个函数返回一个对象（新地址）
      default: () => {}
    }
  },
  methods: {
    fn() {
      console.log(111)
    }
  }
}
</script>
